import { useMemo, useEffect, useState } from 'react';
import { View } from '@tarojs/components';
import PageContainer from '@/components/PageContainer';
import FlexScrollView from '@/components/FlexScrollView';
import { GStyleSheet } from '@/utils/DarkMode';
import Taro, { useRouter } from '@tarojs/taro';
import { useDeviceDetailStore } from '@/hooks';
import { observer } from 'mobx-react-lite';
import './index.scss';
import { toJS } from 'mobx';
import { getFAQ } from '@/services/faq';

Taro.options.html.transformElement = (
  el: { nodeName: string; setAttribute: (arg0: string, arg1: string) => void },
  htmlElement: HTMLElement
) => {
  if (el.nodeName === 'image') {
    el.setAttribute('mode', 'aspectFit');
  }
  // else if (el.h5tagName === 'video') {
  // console.log('iframe', el, htmlElement);

  // }
  return el;
};

const FAQScreen = () => {
  const styles = dstyles.useDynamicStyle();
  const { params } = useRouter();

  const [remoteHtml, setRemoteHtml] = useState<string>('')
  const {id, parent_id, lang} = params;

  // /pages/FAQ/index?title=${title}&parent_id=${parent_id}&id=${id}

  const formatHtml = (value: string) => {
    // iframe 换成video
    let str = value.replace(/<iframe/g, '<video');
    str = str.replace(/<\/iframe>/g, '</video>');
    return str;
  }

  useEffect(() => {
    if (id) {
      getFAQ(lang, `parent_id=${parent_id}`).then(res => {
        if (res.success && res.data) {
          const target = res.data.find(item => `${item.id}` === `${id}`)
          console.log('resresresres', target, res.data)
          const html = formatHtml(target.answer)
          setRemoteHtml(html)

        }
      })
    }
  }, [id, parent_id, lang])

  const { faqDetail } = useDeviceDetailStore();
  useEffect(() => {
    const els = document.getElementsByClassName('h5-a');
    // console.log(els);
    function testOnTap(event: any, el) {
      // console.log('testOnTap', el);
      const { href } = el.props;
      if (href && href.length > 0) {
        Taro.setClipboardData({ data: href });
      }
      // console.log('testOnTap', event, el);
    }
    let arr = [];
    els.forEach(el => {
      const fn = e => {
        testOnTap(e, el);
      };
      arr.push(fn);
      el.addEventListener('tap', fn);
    });

    return () => {
      els.forEach((el, index) => {
        el.removeEventListener('tap', arr[index]);
      });
    };
  }, []);

  const htmlString = useMemo(() => {
    if (remoteHtml) {
      return remoteHtml;
    }
    if (faqDetail && faqDetail.answer) {
      return formatHtml(faqDetail.answer)
    }
    return '';
  }, [faqDetail, remoteHtml]);
  

  console.log('htmlString', htmlString);

  return (
    <PageContainer reLaunch={id} title={params.title}>
      <FlexScrollView id='deviceHelpList'>
        {/* <View style={styles.container} dangerouslySetInnerHTML={{ __html: htmlString }} /> */}
        {/* 使用mp-html插件渲染富文本：https://jin-yufeng.gitee.io/mp-html/#/ */}
        {/**@ts-ignore */}
        <View style={styles.container}>
          <mp-html content={htmlString} showImgMenu={false}></mp-html>
        </View>
      </FlexScrollView>
    </PageContainer>
  );
};

const dstyles = GStyleSheet.create({ 
  container: {
    padding: 16,
  },
});

export default observer(FAQScreen);
